<template>
  <div>
    <el-row style="margin-left: -10px; margin-right: -10px">
      <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
        <div class="box sku-sale-stats-chart bgc1">
          <div class="header">
            <div class="title">日销售统计</div>
          </div>
          <div class="body">
            <div class="stats">
              <div class="item1">
                <div class="num color1 text-shadow1">{{ orderCount.day }}</div>
                <div class="text color2">当日销售量（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item1">
                <div class="num color1 text-shadow1">{{ orderAmount.day }}</div>
                <div class="text color2">当日销售额（元）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item1">
                <div class="num color1 text-shadow1">
                  {{ totalBill.day / 100 }}
                </div>
                <div class="text color2">当日分成（元）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="padding-left: 10px; padding-right: 10px">
        <div class="box sku-sale-stats-chart bgc2">
          <div class="header">
            <div class="title">月销售统计</div>
          </div>
          <div class="body">
            <div class="stats">
              <div class="item1">
                <div class="num color3 text-shadow2">
                  {{ orderCount.month }}
                </div>
                <div class="text color4">当月销售量（个）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item1">
                <div class="num color3 text-shadow2">
                  {{ (orderAmount.month / 1000000).toFixed(2) }}
                </div>
                <div class="text color4">当月销售额（万元）</div>
              </div>
            </div>
            <div class="stats">
              <div class="item1">
                <div class="num color3 text-shadow2">
                  {{ totalBill.month / 100 }}
                </div>
                <div class="text color4">当月分成（元）</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="app-container">
      <div class="search">
        <el-form inline :model="search">
          <el-form-item size="medium" label="合作商：">
            <el-select v-model="partnerId" clearable placeholder="请选择">
              <el-option
                v-for="item in partnerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              size="medium"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              class="my-primary1"
              icon="el-icon-search"
              @click="query"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="stats">
        <span class="label">笔数统计：</span>&nbsp;&nbsp;
        <span class="value">{{ collect.orderCount }}</span>&nbsp;&nbsp;
        <span class="unit">个</span>
        <span class="label">收入统计：</span>&nbsp;&nbsp;
        <span class="value">{{ (collect.orderAmount / 100)?.toFixed(2) }}</span>&nbsp;&nbsp;
        <span class="unit">元</span>
        <span class="label">分成统计：</span>&nbsp;&nbsp;
        <span class="value">{{ collect.totalBill / 100 }}</span>&nbsp;&nbsp;
        <span class="unit">元</span>
      </div>
      <div class="result">
        <el-table
          :data="tableData"
          style="width: 100%"
          empty-text="暂无数据"
          fit
          highlight-current-row
          :cell-style="{
            height: '44px',
            padding: '2px 0px',
            textAlign: 'left',
            color: 'rgb(102, 102, 102)',
            borderBottom: 'none',
          }"
          :header-cell-style="{
            lineHeight: 1.15,
            padding: '10px 0px 9px',
            background: 'rgb(243, 246, 251)',
            fontWeight: 500,
            textAlign: 'left',
            color: 'rgb(102, 102, 102)',
            borderBottom: 'none',
          }"
        >
          <el-table-column label="订单日期" prop="date" />
          <el-table-column label="合作商" prop="ownerName" />
          <el-table-column label="分成比例" prop="ratio">
            <template v-slot="{row}">
              {{ row.ratio+'%' }}
            </template>
          </el-table-column>
          <el-table-column label="收入(元)" prop="orderTotalMoney">
            <template v-slot="{row}">
              {{ `+${row.orderTotalMoney/100}` }}
            </template>
          </el-table-column>
          <el-table-column label="笔数" prop="orderCount" />
          <el-table-column label="分成金额(元)" prop="totalBill">
            <template v-slot="{row}">
              {{ `+${row.totalBill/100}` }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            layout="slot,prev,next"
            :current-page.sync="search.pageIndex"
            :total="totalCount"
            :page-size="search.pageSize"
            prev-text="上一页"
            next-text="下一页"
            @current-change="orderSearch"
          >
            <template order="-1">
              <span
                class="el-pagination__total"
              >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
                totalPage
              }}
                页</span>
            </template>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTotalBill,
  getOrderCount,
  getOrderAmount,
  getPartnerCollect
} from '@/api/order'
import { searchPartnerList } from '@/api/vm'
export default {
  data() {
    return {
      totalBill: {
        day: '',
        month: ''
      },
      orderCount: {
        day: '',
        month: ''
      },
      orderAmount: {
        day: '',
        month: ''
      },
      search: {
        pageIndex: 1,
        pageSize: 10,
        partnerName: '',
        start: '',
        end: ''
      },
      partnerId: '',
      tableData: [],
      totalCount: 0,
      totalPage: 0,
      partnerList: [],
      collect: {
        totalBill: '',
        orderCount: '',
        orderAmount: ''
      }
    }
  },
  computed: {
    date: {
      get() {
        return [this.search.start, this.search.end]
      },
      set(value) {
        if (value) {
          this.search.start = value[0]
          this.search.end = value[1]
        } else {
          this.search.start = ''
          this.search.end = ''
        }
      }
    },
    today() {
      // 获取当前日期字符串
      return new Date()
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    },
    firstDayOfMonth() {
      const today = new Date()
      // 获取本月第一天字符串
      return new Date(today.getFullYear(), today.getMonth(), 1)
        .toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        .replace(/\//g, '-')
    }
  },
  created() {
    this.search.start = this.firstDayOfMonth
    this.search.end = this.today
    this.getTotalBill()
    this.getOrderCount()
    this.getOrderAmount()
    this.getPartnerList()
    this.orderSearch()
  },
  methods: {
    async getTotalBill() {
      this.totalBill.day = await getTotalBill({
        start: this.today + ' 00:00:00',
        end: this.today + ' 23:59:59'
      })
      this.totalBill.month = await getTotalBill({
        start: this.firstDayOfMonth + ' 00:00:00',
        end: this.today + ' 23:59:59'
      })
    },
    async getOrderCount() {
      this.orderCount.day = await getOrderCount({
        start: this.today + ' 00:00:00',
        end: this.today + ' 23:59:59'
      })
      this.orderCount.month = await getOrderCount({
        start: this.firstDayOfMonth + ' 00:00:00',
        end: this.today + ' 23:59:59'
      })
    },
    async getOrderAmount() {
      this.orderAmount.day = await getOrderAmount({
        start: this.today + ' 00:00:00',
        end: this.today + ' 23:59:59'
      })
      this.orderAmount.month = await getOrderAmount({
        start: this.firstDayOfMonth + ' 00:00:00',
        end: this.today + ' 23:59:59'
      })
    },
    async getPartnerList() {
      const { currentPageRecords } = await searchPartnerList({
        pageIndex: 1,
        pageSize: 100000
      })
      this.partnerList = currentPageRecords
    },
    query() {
      this.search.pageIndex = 1
      this.search.partnerName = this.partnerList.find(item => item.id === this.partnerId)?.name
      this.orderSearch()
    },
    async orderSearch() {
      const { currentPageRecords, totalCount, totalPage } =
        await getPartnerCollect({
          ...this.search
        })
      this.totalCount = parseInt(totalCount)
      this.totalPage = totalPage
      this.tableData = currentPageRecords
      this.getCollect()
    },
    async getCollect() {
      this.collect.totalBill = await getTotalBill({
        start: this.search.start + ' 00:00:00',
        end: this.search.end + ' 23:59:59',
        partnerId: this.partnerId
      })
      this.collect.orderCount = await getOrderCount({
        start: this.search.start + ' 00:00:00',
        end: this.search.end + ' 23:59:59',
        partnerId: this.partnerId
      })
      this.collect.orderAmount = await getOrderAmount({
        start: this.search.start + ' 00:00:00',
        end: this.search.end + ' 23:59:59',
        partnerId: this.partnerId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/common.scss";
.app-container .search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 64px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
}
.app-container .search .el-form-item {
  margin-bottom: 0;
}
.sku-sale-stats-chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(25vh - 30px);
  min-height: 166px;
}

.sku-sale-stats-chart .body .stats,
.sku-sale-stats-chart .body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.sku-sale-stats-chart .body .stats {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.sku-sale-stats-chart .body .stats .item1 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.sku-sale-stats-chart .body .stats .item1 .num {
  height: 50px;
  font-size: 36px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  line-height: 50px;
  text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
}

.sku-sale-stats-chart .body .stats .item1 .text {
  height: 17px;
  margin-top: 3px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #91a7dc;
  line-height: 17px;
}

.sku-sale-stats-chart .body .stats .item1 .color1 {
  color: #072074;
}

.sku-sale-stats-chart .body .stats .item1 .color2 {
  color: #91a7dc;
}

.sku-sale-stats-chart .body .stats .item1 .color3 {
  color: #ff5757;
}

.sku-sale-stats-chart .body .stats .item1 .color4 {
  color: #de9690;
}

.sku-sale-stats-chart .body .stats .item1 .text-shadow1 {
  text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
}

.sku-sale-stats-chart .body .stats .item1 .text-shadow2 {
  text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
}

.bgc1 {
  background: #e9f3ff;
  background-image: url(),
    url(https://likede2-admin.itheima.net/img/day.4272ef60.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
}

.bgc2 {
  background: #fbefe8
    url(https://likede2-admin.itheima.net/img/month.5c71f45f.png) no-repeat
    calc(100% - 12px) 100%;
}

.box {
  padding: 20px;
  border-radius: 20px;
}

.box .header .title,
.box .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.box .header .title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
}

.box .header .sub-title {
  margin-left: 10px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
}

.app-container {
  background-color: #fff;
}

.app-container .search {
  margin-top: 20px;
  margin-bottom: 0;
}

.app-container .stats {
  background-color: #fff;
  padding: 10px 0 0 18px;
}

.app-container .stats .label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.app-container .stats .value {
  font-size: 20px;
  color: #ff5757;
  font-weight: 500;
}

.app-container .stats .unit {
  margin-right: 50px;
  font-size: 12px;
  color: #000;
}
</style>
